export const addCheckboxComponent = (editor) => {
    const { Components } = editor;
    Components.addType('customCheckbox', {
        model: {
            defaults: {
                name: 'customCheckbox',
                droppable: false,
                attributes: { class: 'checkbox-group' },
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'custom-checkbox' },
                        components: [
                            { type: 'span', attributes: { class: 'checkmark' } },
                            { type: 'p', attributes: { class: 'checkbox-text' }, content: '复选框' },
                        ],
                    },
                ],
                script() {
                    this.querySelector('.custom-checkbox').addEventListener('click', function() {
                        this.classList.toggle('checked');
                    });
                },
                styles: `
                  .checkbox-group {
                      display: flex;
                      align-items: center;
                      position: relative;
                      padding-left: 35px;
                      cursor: pointer;
                      font-size: 16px;
                      user-select: none;
                  }
                  .custom-checkbox {
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      font-size: 16px;
                      user-select: none;
                  }
                  .checkmark {
                      display: inline-block;
                      width: 25px;
                      height: 25px;
                      background-color: #eee;
                      border-radius: 4px;
                      margin-right: 10px;
                      transition: background-color 0.3s;
                      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                  }
                  .custom-checkbox.checked .checkmark {
                      background-color: #2196F3;
                      box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
                  }
                  .custom-checkbox.checked .checkmark:after {
                      content: "";
                      position: absolute;
                      display: block;
                      left: 9px;
                      top: 5px;
                      width: 5px;
                      height: 10px;
                      border: solid white;
                      border-width: 0 3px 3px 0;
                      transform: rotate(45deg);
                  }
                `,
            },
        },
    });

    // 注册 customCheckbox 组件
    editor.BlockManager.add('custom-checkbox', {
        label: '复选框',
        category: '组件类',
        content: { type: 'customCheckbox' },
    });
};